<template>
  <div class="home">
    <Header></Header>
    <div id="Home-pc">
      <div id="content">
        <div class="welcome">
          <div class="register-login">
            <h1>量化平台，交易出你的风采</h1>
            <h4>我们提供免费的量化数据、投研工具、量化学习体系、在线交流社区等。</h4>
            <div class="register-login-pic">
              <!-- 我们 -->
              <img src="@/assets/ls_banner.jpg" height="392px" width="850px" alt />
            </div>
            <div class="function">
              <el-button @click="gopage" type="primary" plain>登录</el-button>
              <el-button @click="gopage" plain>注册</el-button>
            </div>
          </div>
        </div>
        <div class="strategy">
          <h1>策略精选</h1>
          <div class="strategy-store">
            <div class="card" v-for="item in StrategyCardList" :key="item.id">
              <Strategy_Card :cardInfo="item"></Strategy_Card>
            </div>
          </div>
        </div>
        <div class="parter">
          <h1>携手合作伙伴共建双赢云端生态</h1>
          <h3>致力于帮助合作伙伴及用户构建基于云服务计算的成功业务实践和解决方案</h3>
          <ul class="parter-box">
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail1.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail2.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail3.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail1.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail1.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail3.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail2.jpg" alt />
            </li>
            <li class="my-partner">
              <img src="@/assets/Improve_Shop_Detail1.jpg" alt />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="Home-mobile">
      <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="@/assets/welcome.png" width="100%" height="400px" />
            </a>
          </div>
          <!-- 第一张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="@/assets/strategy_mail1.jpg" width="100%" height="400px" />
            </a>
          </div>
          <!-- 第二张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="@/assets/timg.jpg" width="100%" height="400px" />
            </a>
          </div>
          <!-- 第三张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="@/assets/welcome.png" width="100%" height="400px" />
            </a>
          </div>
          <!-- 第四张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="@/assets/welcome.png" width="100%" height="400px" />
            </a>
          </div>
          <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="@/assets/welcome.png" width="100%" height="400px" />
            </a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <div class="login-register">
        <div class="register">
          <i class="el-icon-user"></i>
          <p>注册</p>
        </div>
        <div class="login">
          <i class="el-icon-key"></i>
          <p>登录</p>
        </div>
      </div>
      <div class="strategy">
        <h1>策略广场</h1>
        <div class="card" v-for="item in StrategyCardList" :key="item.id">
          <Strategy_Card :cardInfo="item"></Strategy_Card>
        </div>
      </div>
      <div class="partner">
        <h1>他们都在是有奇点平台</h1>
        <div class="partner-box">
          <div>
            <img src="@/assets/welcome.png" alt />
          </div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import Header from "@/components/Header.vue";
import Strategy_Card from "@/components/cards/Strategy_Card.vue";
export default {
  name: "home",
  data() {
    return {
      StrategyCardList: [
        {
          id: 1,
          name: "行业轮动策略",
          realIncome: "20%",
          realDays: 3,
          todayIncome: "-1.2%",
          price: 800,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 12],
          baseIncome: [10, 12, 5]
        },
        {
          id: 2,
          name: "日内回转策略",
          realIncome: "-99%",
          realDays: 3,
          todayIncome: "-33.3%",
          price: 999,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 12],
          baseIncome: [10, 12, 5]
        },
        {
          id: 3,
          name: "动量择时交易",
          realIncome: "20%",
          realDays: 3,
          todayIncome: "-1.2%",
          price: 800,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 56],
          baseIncome: [10, 1.2, 15]
        }
      ],
      Arr: [
        { id: 1, name: "登录", url: "/welcome" },
        { id: 2, name: "注册", url: "/welcome" }
      ]
    };
  },
  methods: {
    gopage() {
      this.$router.push(this.Arr[1].url);
    }
  },
  components: {
    Header,
    Strategy_Card
  }
};
</script>
<style scoped>
@media screen and (min-width: 981px) {
  #Home-mobile {
    display: none;
  }
  #Home-pc {
    display: block;
    width: 100%;
  }
  /* 内容框 */
  #content {
    width: 80%;
    margin: 0px auto 0px auto;
  }
  /* 登录注册 */
  .welcome {
    width: 100%;
    height: 530px;
  }
  .register-login {
    background-color: #22305f;
    width: 650px;
    height: 450px;
    padding: 150px 0px 0px 100px;
    position: relative;
  }
  .register-login-pic {
    position: absolute;
    left: 650px;
    top: 58px;
    height: 450px;
  }
  .register-login h1 {
    line-height: 90px;
    color: #fff;
  }
  .register-login h4 {
    line-height: 50px;
    padding-bottom: 40px;
    color: #fff;
  }
  .register-login .function {
    width: 100%;
    height: auto;
  }
  .register-login .function .el-button {
    width: 120px;
  }
  /* 策略精选 */
  .strategy {
    width: 100%;
    height: auto;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 10px #ddd;
    opacity: 0.9;
    border-radius: 2%;
  }
  .strategy h1 {
    width: 100%;
    line-height: 300px;
    text-align: center;
  }
  .strategy .strategy-store {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5% 0 5%;
  }
  .strategy .strategy-store .card {
    position: relative;
    top: 0px;
    bottom: 0px;
    width: 28%;
    margin-bottom: 60px;
    box-shadow: 0px 0px 2px 1px #efefef;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
  }
  .strategy .strategy-store .card:hover {
    top: -20px;
    box-shadow: 0px 10px 16px 3px #dfdfdf;
  }
  .parter {
    width: 100%;
    height: 600px;
    text-align: center;
    box-shadow: 0 0 10px #ddd;
    border-radius: 2%;
  }
  .parter h1 {
    line-height: 90px;
    margin-top: 60px;
  }
  .parter h3 {
    line-height: 60px;
  }
  .parter .parter-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 390px;
    list-style-type: none;
  }
  .parter .parter-box li {
    position: relative;
    top: 0px;
    bottom: 0px;
    width: 150px;
    height: 150px;
    background-color: #dfdfdf;
    transition: all 0.3s ease-in-out 0.1s;
    cursor: pointer;
  }
  .parter .parter-box li:hover {
    top: -10px;
    background-color: #fff;
  }
}
@media screen and (max-width: 980px) {
  #Home-pc {
    display: none;
  }
  #Home-mobile {
    display: block;
    width: 100%;
    background-color: rgb(247, 247, 247);
    /* margin-top: 55px; */
  }
  .login-register {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .login-register > div {
    display: inline-block;
    width: 50%;
    height: 60px;
    padding: 10px 0px;
    cursor: pointer;
  }
  .login-register > div i {
    display: block;
    width: 100%;
    line-height: 30px;
    font-size: 26px;
    text-align: center;
  }
  .login-register > div i:first-child {
    border-right: 1px solid #dfdfdf;
  }
  .login-register > div p {
    width: 100%;
    line-height: 30px;
    font-size: 18px;
    text-align: center;
  }
  .strategy {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 10px 0px;
  }
  .strategy h1 {
    height: 90px;
    line-height: 90px;
    text-align: center;
  }
  .strategy .card {
    /* width: 97%; */
    padding: 10px;
    margin: 20px auto 0px;
  }
  .partner {
    width: 100%;
    margin-top: 40px;
    font-size: 1em;
    border-top: 1px solid #fff;
    background-color: #fff;
  }
  .partner h1 {
    margin: 20px 0px 10px;
    font-size: 1.4em;
    line-height: 1.6;
    text-align: center;
  }
  .partner-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .partner-box div {
    min-width: 160px;
    height: 80px;
    background-color: #dfdfdf;
    margin: 10px 5px;
  }
}
</style>
